import { PureComponent } from 'react';
import { connect } from 'dva';
import { Layout, Menu, Icon, Dropdown} from 'antd'
import menu from '../common/menu'
import MenuItem from 'antd/lib/menu/MenuItem'
import { Link } from 'dva/router'
import logo from '../assets/Logo.png'; //这样引入图片才有效
import person from '../assets/yay.png';
import styles from './mainLayout.less';

const { Header, Content, Sider} = Layout;
const SubMenu = Menu.SubMenu;

@connect(({ loading, example = {} }) => ({    //其中global={}表示global中的所有state
  commonList: example.commonList,   //读取原有的state，即models中的global.js文件中的weather
  loading: loading.effects['example/getCommonListData'],   //这个statu使用models中的chart.js文件中的fetch方法异步获取
}))
export default class MainLayout extends PureComponent {
  state = {
    collapsed: false,
    openKeys: ['数据罗盘'],
    defaultSelectedKeys: ['数据总览'],
    showOpen: false,
  };
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'example/redirect',
      payload: {
        name: '/dataScan'
      }
    })
    dispatch({
      type: 'example/getCommonListData',
      payload: {}
    })
    this.setState({ showOpen: true })
  }
  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }
  // 点击二级子菜单
  handleClick = (e) => {
    // const { dispatch } = this.props
  }
  // 点击二级导航关闭当前菜单
  openMenu = () => {
    const { openKeys } = this.state
    if(openKeys[0] === "数据罗盘"){
      this.setState({openKeys: [' ']})
    }
    if(openKeys[0] === ' '){
      this.setState({ openKeys: ["数据罗盘"]})
    }

  }
  render(){
    const hiStatus = true
    const { openKeys, defaultSelectedKeys } = this.state
    const { commonList } = this.props
    const dropMenu = (
      <Menu style={{width: '160px'}}>
        <Menu.Item>
          <a
          href="/admin/"
          style={{color: 'rgba(0, 0, 0, 0.45)',fontSize: '14px'}}
          >
          <Icon type="logout" style={{margin: '0 5px 0 8px',color:'rgba(0, 0, 0, 0.45)'}}/>
          退出登录
          </a>
        </Menu.Item>
      </Menu>
    )
    return(
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          // collapsible
          // collapsed={this.state.collapsed}
          onCollapse={this.onCollapse}
        >
        <div className={styles.logo} style={{color: '#fff'}}>
            <img alt="logo" src={logo} />
            <span>· 后台管理</span>
        </div>
        {/* openKeys={openKeys}  */}
          <Menu theme="dark" defaultSelectedKeys={defaultSelectedKeys} mode="inline"  openKeys={openKeys}  onClick={this.handleClick}  onOpenChange={this.openMenu}>
             {
                menu.length && menu.map((item) => (
                  <SubMenu key={item.name}
                    title={<span><Icon type={item.icon} /><span>{item.name}</span></span>}
                  >
                    {
                      item.children.map((item) => (
                        <MenuItem key={item.name}>
                          <Link replace={hiStatus} to={`/${item.path}`}>
                            {/* <Icon type={item.icon} /> */}
                            <span>{item.name}</span>
                          </Link>
                        </MenuItem>
                      ))
                    }
                  </SubMenu>
                ))
              }
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }} className={styles.header}>
          <Dropdown overlay={dropMenu}>
            <div className={styles.person}>
              <img src={person} alt=""/>
              <span>{commonList.userName ? commonList.userName : '用户名'}</span>
            </div>
            </Dropdown>
          </Header>
          <Content style={{ margin: '0 16px'}}>
            {this.props.children}
          </Content>
        </Layout>
      </Layout>  
    )
  }
}

MainLayout.propTypes = {
};

// export default connect()(MainLayout);
